<template>
	<view class="checklist">
		<SwitchPatient :fun="swit" :id="Data.optionsId"></SwitchPatient>
		<view class="CardBalance">
			<text>日花费金额</text>
			<text v-if="Data.money">￥{{ Data.money }}.00</text>
			<text v-else>暂无花费</text>
		</view>
		<picker mode="date" class="checklistDate" @change="dateChange">
			<text>{{ Data.date }}</text>
			<text class="iconfont icon-xiangxia1"></text>
		</picker>
		<confirmlnfoBreakdown :list="Data.list"></confirmlnfoBreakdown>
	</view>
</template>

<script setup>
	import SwitchPatient from '@/components/SwitchPatient.vue'
	import confirmlnfoBreakdown from '@/pages/selfPayment/confirmInfo/confirmlnfoBreakdown.vue'
	import {
		reactive,
		onMounted
	} from 'vue'
	import {
		daylistQueryprice
	} from '@/api/TopUpService'
	import {
		useTopStore
	} from '@/store/TopUpService.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const toDate = t => {
		return new Date(t)
			.toLocaleString('zh-CN', {
				dateStyle: 'short'
			})
			.split('/')
			.join('-')
	}
	const topStore = useTopStore();
	const Data = reactive({
		date: '',
		list: [],
		money: '',
		id: 0,
		optionsId: 0
	})
	const swit = (v) => {
		Data.id = v.id;
		daylistQuery(v.id, Data.date)
	}
	const dateChange = ev => {
		Data.date = ev.detail.value;
		daylistQuery(topStore.userId, Data.date)
	}
	const daylistQuery = (id, dateTime) => {
		daylistQueryprice({
			id,
			dateTime
		}).then(({
			data
		}) => {
			if (data.msg == 'success') {
				Data.list = data.data['2'];
				Data.money = data.data['1'] ? data.data['1'].daytTotalPrice : '';
			}
		}).catch((err) => {
			console.log(err)
		})
	}
	onMounted(() => {

	})
	onLoad((options) => {
		Data.date = toDate(new Date())
		options.time && (Data.date = (options.time).split(' ')[0]);
		options.id && (Data.optionsId = options.id);
	})
</script>

<style scoped lang="less">
	.checklist {
		width: 750rpx;

		.CardBalance {
			width: 680rpx;
			height: 110rpx;
			border-radius: 10rpx;
			border: 1px solid #f2f2f2;
			margin: 40rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-weight: 600;
		}

		.checklistDate {
			margin-left: 45rpx;
			font-size: 25rpx;
			background-color: #e4f0ff;
			color: #026fff;
			width: 240rpx;
			height: 50rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 600;

			.iconfont {
				font-size: 20rpx;
				margin: 0 0 0 10rpx;
			}
		}
	}
</style>
